<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/treeview.css" rel="stylesheet">
	<link href="css/buttons.css" rel="stylesheet">
	<style type="text/css">
		#vote_button{
			width:120px;
			color:white;
			background-color:#0050FF;
		}
		
		#checkout_button{
			width:120px;
			color:white;
			background-color:#329632;
		}
		
		button.dropdown-toggle
		{
			width:120px;
		}
		
		/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
		.dropdown-menu .sub-menu {
			left: 100%;
			position: absolute;
			top: 0;
			visibility: hidden;
			margin-top: -1px;
		}

		.dropdown-menu li:hover .sub-menu {
			visibility: visible;
			display: block;
		}
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	<div class="row" style="margin-top:80px">
		<div class="col-xs-12 col-md-8 col-md-offset-2">
			<div id='popularStocks' class='marquee-with-options'>滚动条</div>
		</div>
	</div>
	
	<div class="row" style="margin-top:20px">
		<H3 style="text-align:center">Stocks in GuHappy Standard Contests</H3>
		<div style="text-align:center">(In Progress)</div>
		<br>
		<div class="col-xs-12 col-md-6 col-md-offset-3">
			<form class="form-inline" role="form">
				<div class="col-md-10 col-xs-8">
					<div class="input-group">
						<span class="input-group-btn">
							<div class="btn-group">
								<button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
									<span id="areaCode">Canada</span>
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li><a href="javascript:void(0)">Canada</a></li>
									<li><a href="javascript:void(0)">China</a></li>
									<li><a href="javascript:void(0)">United States</a></li>
									<li><a href="javascript:void(0)">France</a></li>
									<!-- <li role="presentation" class="divider"></li> -->
								</ul>
							</div>
						</span>
						<input type="text" class="form-control" id="appendedInputButtons" placeholder="Please enter company name or symbol.">
					</div> <!--/input-group -->
				</div>
				<div class="col-xs-2 col-md-2">
					<button class="btn btn-blue" type="submit">Find Contest<i class="icon-search"></i></button>
				</div>
			</form>
		</div><!-- /.col-md-6 -->
		<br><br>
		<div class="container">
			<form class="form-inline" role="form">
				<div class="tree">
					<ul id="stock_tree">
						<li id="template">
							<span id="symbol" class="stock col-xs-1 col-md-2">
								<i class="icon-calendar"></i>stock_symbol
							</span>
							<div class="row">
								<div class="col-md-1 col-xs-offset-1 col-md-offset-8">
									<a href="#"><img src="images/history.PNG" /></a>
								</div>
							</div>
							<ul>
								<li id="bull">
									<div class="row">
										<div style="text-align:center" class="col-md-1">
											<img src="images/bull.PNG" />
											<div class="col-xs-0" style="margin-top:20px">
												Votes:
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bull">
												<div>3-DAYS</div>
												<div id="days_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-green" type="submit" id="days_votes">days_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bull">
												<div>WEEK</div>
												<div id="week_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-green" type="submit" id="week_votes">week_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bull">
												<div>MONTH</div>
												<div id="month_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-green" type="submit" id="month_votes">month_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bull">
												<div>QUARTER</div>
												<div id="quarter_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-green" type="submit" id="quarter_votes">quarter_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bull">
												<div>YEAR</div>
												<div id="year_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-green" type="submit" id="year_votes">year_votes</button>
											</div>
										</div>
									</div>
								</li>
								<li id="bear">
									<div class="row">
										<div style="text-align:center" class="col-md-1">
											<img src="images/bear.PNG" />
											<div style="margin-top:20px">
												Votes:
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bear">
												<div>3-DAYS</div>
												<div id="days_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-red" type="submit" id="days_votes">days_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bear">
												<div>WEEK</div>
												<div id="week_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-red" type="submit" id="week_votes">week_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bear">
												<div>MONTH</div>
												<div id="month_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-red" type="submit" id="month_votes">month_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bear">
												<div>QUARTER</div>
												<div id="quarter_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-red" type="submit" id="quarter_votes">quarter_votes</button>
											</div>
										</div>
										<div style="text-align:center" class="col-md-2">
											<div class="contest_type bear">
												<div>YEAR</div>
												<div id="year_end">ends at: end_date</div>
											</div><br>
											<div style="margin-top:5px">
												<button class="btn btn-red" type="submit" id="year_votes">year_votes</button>
											</div>
										</div>
									</div>
								</li>
								
							</ul>
						</li>
						
					</ul>
				</div>
			</form>
		</div>
	<div>
</body>
<script src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
<script>
function refreshList() {
	$('.tree > ul').attr('role', 'tree').find('ul').attr('role', 'group');
	$('.tree').find('li:has(ul)').addClass('parent_li').attr('role', 'treeitem').find(' > span').attr('title', 'Collapse this branch').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(':visible')) {
    		children.hide('fast');
    		$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        }
        else {
    		children.show('fast');
    		$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
}

$(function() {
	var $clone = $('#template').clone();
	var template;
	$.get("data/allContests.json",function(data,status){
		if(status=="success") {
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var stock = data.stocks[i];
				if(i > 0) {
					$template = $clone.clone();
					$('#stock_tree').append($template);
				}
				else {
					$template = $('#template');
				}
				var symbol = $template.find("#symbol").html();
				symbol = symbol.replace("stock_symbol", stock.symbol) + "&nbsp;&nbsp;&nbsp;&nbsp;" + stock.price;
				$template.find("#symbol").html(symbol);
				
				var $bull = $template.find("#bull");
				$bull.find("#days_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.days_end);
					return text; 
				});
				$bull.find("#days_votes").text(function(i,origText){
					var text = stock.bull.days_votes;
					return text; 
				});
				$bull.find("#week_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.week_end);
					return text; 
				});
				$bull.find("#week_votes").text(function(i,origText){
					var text = stock.bull.week_votes;
					return text; 
				});
				$bull.find("#month_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.month_end);
					return text; 
				});
				$bull.find("#month_votes").text(function(i,origText){
					var text = stock.bull.month_votes;
					return text; 
				});
				$bull.find("#quarter_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.quarter_end);
					return text; 
				});
				$bull.find("#quarter_votes").text(function(i,origText){
					var text = stock.bull.quarter_votes;
					return text; 
				});
				$bull.find("#year_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.year_end);
					return text; 
				});
				$bull.find("#year_votes").text(function(i,origText){
					var text = stock.bull.year_votes;
					return text; 
				});
				
				var $bear = $template.find("#bear");
				$bear.find("#days_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.days_end);
					return text; 
				});
				$bear.find("#days_votes").text(function(i,origText){
					var text = stock.bear.days_votes;
					return text; 
				});
				$bear.find("#week_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.week_end);
					return text; 
				});
				$bear.find("#week_votes").text(function(i,origText){
					var text = stock.bear.week_votes;
					return text; 
				});
				$bear.find("#month_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.month_end);
					return text; 
				});
				$bear.find("#month_votes").text(function(i,origText){
					var text = stock.bear.month_votes;
					return text; 
				});
				$bear.find("#quarter_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.quarter_end);
					return text; 
				});
				$bear.find("#quarter_votes").text(function(i,origText){
					var text = stock.bear.quarter_votes;
					return text; 
				});
				$bear.find("#year_end").text(function(i,origText){
					var text = origText.replace("end_date", stock.bull.year_end);
					return text; 
				});
				$bear.find("#year_votes").text(function(i,origText){
					var text = stock.bear.year_votes;
					return text; 
				});
			}
			refreshList();
		}
	});
});

$(function() {
	// Setup drop down buttons.
	$(".dropdown-menu li a").bind('click', function(e) {
		$("#areaCode").text($(this).text());
	});

	var $mwo = $('.marquee-with-options');
	
	$.get("data/popular.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var inner = '<span class="popularStock" style="color:';
				var stock = data.stocks[i];
				if(stock.change.indexOf('-') > -1) {
					inner += '#AA1111;">';
				}
				else {
					inner += '#228822;">';
				}
				inner += stock.symbol + ' ' + stock.change + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
				html += inner;
			}
			
			$("#popularStocks").html(function(i,origHtml){
				return html; 
			});
			
			$mwo.marquee();
			
			var showing = false;
			var symbol = "";
			var currentSymbol = "";
			$(".popularStock").click(function(){
			});
		}
	});
});
</script>
</html>
